<template>
  <div>
    <div>
      <div class="orderHeader" style="margin: 5px 0px 0px 0px">
        <div class="orderSearch">
          <!-- <template>
            <el-form ref="form" :model="steamcar" :inline="true">
              <el-form-item label="运单号">
                <el-input
                    id="waybill_no_search_2"
                  v-model="steamcar.waybill_no"
                  @click.stop.native
                  style="width: 200px"
                  placeholder="支持批量搜索,多个单号用逗号分隔"
                />
              </el-form-item>
              <el-form-item label="干线单号" size="mini">
                <el-input
                  v-model="steamcar.batch"
                  @click.stop.native
                  style="width: 200px"
                  placeholder="请输入批次号"
                />
              </el-form-item>
              <el-form-item label="运输类型" size="mini">
                <el-select
                  v-model="steamcar.type"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in steamcartypes"
                    :label="item.value"
                    :value="item.index"
                    :key="item.index"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="运输方式" size="mini">
                <el-select
                  v-model="steamcar.transport_way"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="pay in transportData"
                    :key="pay.item_code"
                    :label="pay.item_name"
                    :value="pay.item_code"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="承运商" size="mini">
                <el-select
                  v-model="steamcar.carrier_id"
                  filterable
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in companyData"
                    :label="item.name"
                    :value="item.id + ''"
                    :key="item.id"
                    >{{ item.name }}</el-option
                  >
                </el-select>
              </el-form-item>
              <el-form-item label="承运单号" size="mini">
                <el-input
                  v-model="steamcar.carrier_number"
                  @click.stop.native
                  style="width: 200px"
                  placeholder="请输入批次号"
                />
              </el-form-item>
              <el-form-item label="干线始发网点">
                <el-cascader
                  v-model="steamcar.from_network_id"
                  :options="organizationBoxData"
                  :props="propsBranchType"
                  :show-all-levels="false"
                  filterable
                >
                </el-cascader>
              </el-form-item>
              <el-form-item label="干线目的网点">
                <el-cascader
                  v-model="steamcar.to_network_id"
                  :options="organizationBoxData"
                  :props="propsBranchType"
                  :show-all-levels="false"
                  filterable
                >
                </el-cascader>
              </el-form-item>
              <el-form-item size="mini">
                <el-button
                    id="go_search_2"
                  type="primary"
                  @click.stop.native
                  icon="el-icon-search"
                  @click="handleSearch"
                  data-tracker="P7-1"
                  >查询</el-button
                >
                <el-button
                  type="primary"
                  @click.stop.native
                  plain
                  icon="el-icon-refresh"
                  @click="handleReset"
                  data-tracker="P7-2"
                  >重置</el-button
                >
              </el-form-item>
            </el-form>
          </template> -->
          <!-- </el-collapse-item>
          </el-collapse> -->
        </div>
      </div>
    </div>

    <div class="actions" style="margin-bottom: 10px">
      <div class="left">
        <template v-if="tabIndexList == 1">
          <el-button
            id="dispatch_departure"
            data-tracker="P7-3"
            type="primary"
            plain
            size="mini"
            @click="handleClickOperation(1)"
            v-permission="'dispatch_depart'"
            >发车
          </el-button>
          <el-button
            data-tracker="P7-6"
            type="primary"
            plain
            size="mini"
            @click="handleClickOperation(4)"
            v-permission="'dispatch_loaded_cancel'"
            >删除
          </el-button>
        </template>
        <template v-if="tabIndexList == 2">
          <el-button
            id="dispatch_arrive"
            data-tracker="P7-4"
            type="primary"
            plain
            size="mini"
            @click="handleClickOperation(2)"
            v-permission="'dispatch_arrival'"
            >到达
          </el-button>
          <el-button
            data-tracker="P7-5"
            type="primary"
            plain
            size="mini"
            @click="handleClickOperation(3)"
            v-permission="'dispatch_depart_cancel'"
            >取消发车
          </el-button>
        </template>
        <template v-if="tabIndexList == 3">
          <el-button
            data-tracker="P7-11"
            type="primary"
            plain
            size="mini"
            @click="handleClickOperation(5)"
            v-permission="'dispatch_arrival_cancel'"
            >取消到达
          </el-button>
        </template>
        <el-dropdown
          v-permission="'dispatch_import_update'"
          @command="handleWaybillMessage"
          divided
          class="operation-drop"
        >
          <el-button type="primary" plain>
            导入<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu
            class="operation-drop"
            slot="dropdown"
            style="width: 150px"
          >
            <el-dropdown-item command="2">修改干线单信息</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button
          type="primary"
          :loading="isLoading"
          plain
          size="mini"
          @click="handleExport()"
          v-permission="'dispatch_export'"
          >导出</el-button
        >
      </div>
      <div class="right" style="display: flex">
        <el-button
          type="primary"
          @click.stop.native
          icon="el-icon-refresh"
          @click="handleReset"
          data-tracker="P7-2"
          style="margin-right: 10px"
          >重置</el-button
        >
        <SettinUp
          :settype="7"
          :objSettinUpdata="objSettinUp"
          key="2"
        ></SettinUp>
      </div>
    </div>
    <div>
      <div v-if="tabIndexList == 1 && header_data_list.length > 0">
        <TableHeader
          ref="TableHeaderList"
          :header_data_list="header_data_list"
          :HeaderData="HeaderData"
          :propMap="propMap"
          :objheader="objheader"
          @childEvent="handleDelete_second"
          @orderIdNumsEvent="handleDeleteType"
          :operation_type="operation_type"
          @handleClickDetail_three="handleClickDetail_three"
          @handleClickEdit_three="handleClickEdit_three"
          @clickabnormalFn_three="clickabnormalFn_three"
          @childEventJupway="handleJumpway"
          particulars="dispatch_detail"
          redact="dispatch_update"
          modification="abnormal_record_create"
        ></TableHeader>
      </div>
      <div v-if="tabIndexList == 2 && header_data_list_two.length > 0">
        <TableHeader
          ref="TableHeaderList"
          :header_data_list="header_data_list_two"
          :HeaderData="HeaderData_two"
          :propMap="propMap_two"
          :objheader="objheader_two"
          @childEvent="handleDelete_second"
          @orderIdNumsEvent="handleDeleteType_two"
          :operation_type="operation_type"
          @handleClickDetail_three="handleClickDetail_three"
          @handleClickEdit_three="handleClickEdit_three"
          @clickabnormalFn_three="clickabnormalFn_three"
          @childEventJupway="handleJumpway"
          particulars="dispatch_detail"
          redact="dispatch_update"
          modification="abnormal_record_create"
        ></TableHeader>
      </div>
      <div v-if="tabIndexList == 3 && header_data_list_three.length > 0">
        <TableHeader
          ref="TableHeaderList"
          :header_data_list="header_data_list_three"
          :HeaderData="HeaderData_three"
          :propMap="propMap_three"
          :objheader="objheader_three"
          @childEvent="handleDelete_three"
          :operation_type="operation_type"
          @orderIdNumsEvent="handleDeleteType_three"
          @handleClickDetail_three="handleClickDetail_three"
          @handleClickEdit_three="handleClickEdit_three"
          @clickabnormalFn_three="clickabnormalFn_three"
          @childEventJupway="handleJumpway"
          particulars="dispatch_detail"
          redact="dispatch_update"
          modification="abnormal_record_create"
        ></TableHeader>
      </div>
      <div class="rightArea" style="margin: 10px 0px 10px 0px">
        <el-pagination
          small
          background
          :current-page="paginations.pageIndex"
          :page-sizes="paginations.pageSizes"
          :page-size="paginations.pageSize"
          :layout="paginations.layout"
          :total="paginations.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <!-- <el-table
          id="filter_box_2"
        ref="multipleTable"
        :data="orders"
        border
        stripe
        align="center"
        @selection-change="handleSelectionChange"
        style="width: 100%"
      >
        <el-table-column type="selection" prop="id" width="45">
        </el-table-column>
        <el-table-column type="index" fixed label="序号" width="50">
        </el-table-column>
        <el-table-column prop="batch" fixed label="干线单号" width="180" />
        <el-table-column prop="dispatch_waybills" label="运单号" width="170">
          <template slot-scope="scope">
            <div v-if="scope.row.dispatch_waybills.length > 3">
              <div
                v-for="(value, index) in scope.row.dispatch_waybills.slice(
                  0,
                  3
                )"
                style="
                  cursor: pointer;
                  color: blue;
                  margin-right: 10px;
                  display: inline-block;
                "
                @click="handleJump(value.waybill_id, index)"
                :key="index"
              >
                {{ value.waybill_no }}
              </div>
              <el-popover placement="right" width="200" trigger="hover">
                <div
                  v-for="(value, index) in scope.row.dispatch_waybills"
                  style="cursor: pointer; color: blue; padding: 5px"
                  @click="handleJump(value.waybill_id, index)"
                  :key="index"
                >
                  {{ value.waybill_no }}
                </div>
                <span slot="reference">......</span>
              </el-popover>
            </div>
            <div v-else>
              <div
                v-for="(value, index) in scope.row.dispatch_waybills"
                style="cursor: pointer; color: blue"
                @click="handleJump(value.waybill_id, index)"
                :key="index"
              >
                {{ value.waybill_no }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="运输类型" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.type | TypeID(scope.row.type) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="transport_way" label="运输方式" width="180">
          <template slot-scope="scope">
            <span>{{
              scope.row.transport_way | formatID(scope.row.transport_way)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="from_network_name"
          label="干线始发网点"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="to_network_name"
          label="干线目的网点"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="carrier_number" label="承运单号" width="180" />
        <el-table-column prop="car_no" label="运输车牌号" width="180" />
        <el-table-column prop="operation_id_name" label="运营" width="180" />
        <el-table-column prop="operation_phone" label="运营电话" width="180" />
        <el-table-column prop="action_id_name" label="操作" width="180" />
        <el-table-column prop="action_phone" label="操作人" width="180" />
        <el-table-column prop="dispatch_id_name" label="调度" width="180" />
        <el-table-column prop="dispatch_phone" label="调度" width="180" />
        <el-table-column prop="from_address" label="干线始发地址" width="180" />
        <el-table-column prop="to_address" label="干线目的地址" width="180" />
        <el-table-column prop="departure_time" label="发车时间" width="180">
          <template slot-scope="scope">
            <span v-time="scope.row.departure_time"></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="expect_delivery_time"
          label="预计到达时间"
          width="180"
        >
          <template slot-scope="scope">
            <span v-time="scope.row.expect_delivery_time"></span>
          </template>
        </el-table-column>
        <el-table-column prop="company_name" label="运输公司" width="180" />
        <el-table-column prop="phone" label="运输公司电话" width="180" />
        <el-table-column prop="driver_name" label="运输司机" width="180" />
        <el-table-column prop="driver_phone" label="运输司机电话" width="180" />
        <el-table-column prop="last_editor_name" label="操作人" width="180">
        </el-table-column>
        <el-table-column prop="update_time" label="操作时间" width="180">
          <template slot-scope="scope">
            <span v-time="scope.row.update_time"></span>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          fixed="right"
          align="center"
          label="操作"
          width="160"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              plain
              data-tracker="P7-14"
              @click="handleClickDetail(scope.row)"
              v-permission="'dispatch_detail'"
              >详情
            </el-button>
            <el-button
              size="mini"
              type="text"
              plain
              data-tracker="P7-7"
              @click="handleClickEdit(scope.row)"
              v-permission="'dispatch_update'"
              >编辑
            </el-button>
            <el-button
            v-permission="'abnormal_record_create'"
              type="text"
              size="mini"
              data-tracker="P7-8"
              @click="clickabnormalFn(scope.row)"
              >异常操作</el-button
            >
          </template>
        </el-table-column>
      </el-table> -->

      <StepOperation
        :showDialog="showDialog"
        step="20"
        @close="handleCloseDialog"
        :id="nowId"
        :ids="ids"
        :mode="mode"
        @closeDialog="handleCloseDialog"
      ></StepOperation>
      <el-dialog
        :title="`确认发车`"
        :visible="showDepartDialog"
        @close="showDepartDialog = false"
        :close-on-click-modal="false"
        v-if="tabIndexList == 1"
      >
        <div style="fontsize: 16px; lineheight: 24px">您确定要操作发车吗？</div>
        <div style="margin: 10px 0">
          如为批量操作，所有批次都将以此发车时间为准
        </div>
        <div ref="depart-form">
          发车时间
          <el-date-picker
            v-model="departTime"
            value-format="timestamp"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button id="node_cancel" @click="showDepartDialog = false"
            >取 消</el-button
          >
          <el-button id="node_ok" type="primary" @click="handleClickDepart"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <el-dialog
        :title="`确认到达`"
        :visible="showArrivalDialog"
        @close="showArrivalDialog = false"
        :close-on-click-modal="false"
        v-if="tabIndexList == 2"
      >
        <div>
          <div style="fontsize: 16px; lineheight: 24px">
            您确定要操作到达吗？
          </div>
          <div style="margin: 10px 0">
            如为批量操作，所有批次都将以此到达时间为准
          </div>
          <div>
            到达时间
            <el-date-picker
              v-model="arrivalTime"
              value-format="timestamp"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button id="node_cancel_2" @click="showArrivalDialog = false"
            >取 消</el-button
          >
          <el-button id="node_ok_2" type="primary" @click="handleClickArrival"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <ImportTrunkline
        :drawertrunklineData="drawertrunklineFlagShow"
        @drawertrunklineShow="drawertrunklineFlagShowFn"
      ></ImportTrunkline>
    </div>
  </div>
</template>
<script>
import TableHeader from "@/page/orderform/components/TableHeader/tableheader.vue";
import {
  departurelist, //待发车列表
  noarrivelist, //待到达(运输中)列表
  dispatcharrivelist, // 已到达列表
  carrierBox, //承运商
  TrunklineDepartFn,
  TrunklineArrivalFn,
  TrunklineDepartCancelFn,
  TrunklineLoadCancelFn,
  dispatchcancel, //取消到达
  waybillDispatchExport,
} from "@/api/waybill";
import { timestamp10 } from "@/utils/mUtils";
import StepOperation from "../components/stepOperation.vue";
import ImportTrunkline from "../../../components/waybillPop/ImportTrunkline.vue";
import SettinUp from "@/page/orderform/components/settingUp/settingUp.vue";
import AbnormalModal from "../components/abnormalModal.vue";
import { dictionanryList } from "@/page/material/common/common";
import { organizationBox } from "@/api/organization";
import { sendClickTracker } from "@/utils/tracker";

export default {
  name: "steamcar",
  components: {
    StepOperation,
    ImportTrunkline,
    AbnormalModal,
    TableHeader,
    SettinUp,
  },
  props: ["tabIndexList"],
  data() {
    return {
      steamcar: {
        batch: "", //批次号
        waybill_no: "", // 运单编号
        type: "", //运输类型
        transport_way: "", //运输方式
        carrier_id: "", //承运商id
        carrier_number: "", //承运编号
        from_network_id: "", //始发网点
        to_network_id: "", //目的网点
      },
      orders: [],
      paginations: {
        pageIndex: 1, // 当前位于哪页
        pageSize: 20, // 1页显示多少条
        pageSizes: [10, 20, 50, 100], //每页显示多少条
        total: 200,
        layout: "total, sizes, prev, pager, next, jumper", // 翻页属性
      },
      checkIds: [], //选中的id
      showDepartDialog: false, //发车
      departTime: "", // 发车时间
      showArrivalDialog: false, //到达
      showDialog: false, // 编辑弹框
      drawertrunklineFlagShow: false,
      ids: [], // id对应的运单id
      nowId: "", // 当前id,编辑
      arrivalTime: "", // 到达时间
      steamcartypes: [
        {
          index: "0",
          value: "自营",
        },
        {
          index: "1",
          value: "委外",
        },
      ],
      transportData: [], //运输方式
      companyData: [], //承运商
      organizationBoxData: [],
      propsBranchType: {
        emitPath: true,
        checkStrictly: true,
        value: "id",
        label: "branch_name",
        children: "next_level_data",
      },
      isLoading: false,
      mode: "",
      operation_type: "1",
      header_data_list: [],
      propMap: {},
      obj_list: {},
      HeaderData: [],
      orders_list: [],
      header_data_list_two: [],
      propMap_two: {},
      obj_list_two: {},
      HeaderData_two: [],
      orders_list_two: [],
      header_data_list_three: [],
      propMap_three: {},
      obj_list_three: {},
      HeaderData_three: [],
      orders_list_three: [],
    };
  },
  filters: {
    formatID(id, list) {
      switch (id) {
        case "0":
          return "汽运";
          break;
        case "1":
          return "铁路";
          break;
        case "2":
          return "高铁";
          break;
        case "3":
          return "水运";
          break;
        case "4":
          return "航空";
          break;
        case "5":
          return "卡车航班";
          break;
        default:
          return "";
      }
    },
    TypeID(id) {
      switch (id) {
        case "0":
          return "自营";
          break;
        case "1":
          return "委外";
          break;
        default:
          return "";
      }
    },
  },
  mounted() {
    this.getTrunklineList();
    dictionanryList(["transport_way"]).then((res) => {
      this.transportData = res.data.list["transport_way"];
    });
    carrierBox().then((res) => {
      this.companyData = res.data;
    });
    //获取区域
    this.organizationBoxFn();
  },
  watch: {
    tabIndexList: {
      handler(newV, oldV) {
        if (this.tabIndexList == 1) {
          this.Pagedeparturelist();
        } else if (this.tabIndexList == 2) {
          this.Pagenoarrivelist();
        } else if (this.tabIndexList == 3) {
          this.Pagedispatcharrivelist();
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    handleExport() {
      this.isLoading = true;
      const status = [, "0", "1", "2"][this.tabIndexList];
      const params = {
        ...this.steamcar,
        from_network_id:
          this.steamcar.from_network_id == ""
            ? ""
            : this.steamcar.from_network_id[
                this.steamcar.from_network_id.length - 1
              ] + "",
        to_network_id:
          this.steamcar.to_network_id == ""
            ? ""
            : this.steamcar.to_network_id[
                this.steamcar.to_network_id.length - 1
              ] + "",
        page: this.paginations.pageIndex, // 第几页
        page_size: this.paginations.pageSize, // 每页显示条数
      };
      waybillDispatchExport({
        ...params,
        ids: (this.checkIds || []).map(Number),
        status: status,
      }).then((res) => {
        if (res.code === 10000) {
          this.reqUrl = "https://" + res.data.loaded_url;
          window.open(this.reqUrl);
          this.isLoading = false;
        }
      });
      sendClickTracker("P7-13");
    },
    getTrunklineList() {
      // console.log(this.tabIndexList, "数据的切换");
      if (this.tabIndexList == 1) {
        this.Pagedeparturelist();
      } else if (this.tabIndexList == 2) {
        this.Pagenoarrivelist();
      } else if (this.tabIndexList == 3) {
        this.Pagedispatcharrivelist();
      }
    },
    //待发车列表
    Pagedeparturelist() {
      var param = {
        header_id: 7 + "",

        page: this.paginations.pageIndex, // 第几页
        page_size: this.paginations.pageSize, // 每页显示条数
        ...this.obj_list,
      };
      departurelist(param).then((res) => {
        this.orders_list = res.data.list == null ? [] : res.data.list;
        this.orders_list.unshift({});
        this.header_data_list = this.orders_list;
        this.HeaderData = res.data.item_list;
        this.Fntransformation(this.HeaderData);
        this.paginations.total = res.data.total;
        this.$emit("valueChanged", res.data.total);
      });
    },
    objheader(obj) {
      this.orders_list = [];
      var data = {
        header_id: 7 + "",
        ...obj,
      };
      this.obj_list = obj;
      departurelist(data).then((res) => {
        // this.header_data_list = res.data.list
        if (res.code === 10000 && res.data.list !== null) {
          this.orders_list = res.data.list == null ? [] : res.data.list;
          this.orders_list.unshift({});
          this.header_data_list = this.orders_list;
          this.paginations.total = res.data.total;
          this.paginations.pageSize = 20;
          this.$emit("valueChanged", res.data.total);
        } else {
          this.header_data_list = [{}];
          this.paginations.total = res.data.total;
        }
      });
    },
    handleDelete(index, id, type) {
      this.handleJump(id);
    },
    handleDeleteType(value) {
      this.checkIds = value.map(String);
    },
    // 隐射函数
    Fntransformation(obj) {
      const result = {};
      for (const prop in obj) {
        if (obj.hasOwnProperty(prop)) {
          if (obj[prop].send_name !== "") {
            result[obj[prop].name] = obj[prop].show_name;
          } else {
            result[obj[prop].name] = obj[prop].name;
          }
        }
      }
      this.propMap = result;
    },
    //待到达(运输中)列表
    Pagenoarrivelist() {
      // console.log("待到达(运输中)列表", this.steamcar.to_network_id);
      var param = {
        header_id: 7 + "",
        page: this.paginations.pageIndex, // 第几页
        page_size: this.paginations.pageSize, // 每页显示条数
        ...this.obj_list_two,
      };
      noarrivelist(param).then((res) => {
        this.orders_list_two = res.data.list == null ? [] : res.data.list;
        // console.log(this.orders_list_two, "jfalksdjflkj");
        this.orders_list_two.unshift({});
        this.header_data_list_two = this.orders_list_two;
        this.HeaderData_two = res.data.item_list;
        this.Fntransformation_two(this.HeaderData_two);
        this.paginations.total = res.data.total;
        this.$emit("valueChanged", res.data.total);
      });
      // console.log("待到达(运输中)列表");
    },
    objheader_two(obj) {
      this.orders_list_two = [];
      var data = {
        header_id: 7 + "",
        ...obj,
      };
      this.obj_list_two = obj;
      noarrivelist(data).then((res) => {
        // this.header_data_list = res.data.list
        if (res.code === 10000 && res.data.list !== null) {
          this.orders_list_two = res.data.list == null ? [] : res.data.list;
          this.orders_list_two.unshift({});
          this.header_data_list_two = this.orders_list_two;
          this.paginations.total = res.data.total;
          this.paginations.pageSize = 20;
          this.$emit("valueChanged", res.data.total);
        } else {
          this.header_data_list_two = [{}];
          this.paginations.total = res.data.total;
        }
      });
    },
    handleDelete_two(index, id, type) {
      this.handleJump(id);
    },
    handleDeleteType_two(value) {
      this.checkIds = value.map(String);
    },
    // 隐射函数
    Fntransformation_two(obj) {
      const result = {};
      for (const prop in obj) {
        if (obj.hasOwnProperty(prop)) {
          if (obj[prop].send_name !== "") {
            result[obj[prop].name] = obj[prop].show_name;
          } else {
            result[obj[prop].name] = obj[prop].name;
          }
        }
      }
      this.propMap_two = result;
    },
    // 已到达列表
    Pagedispatcharrivelist() {
      // console.log("已到达(运输中)列表", this.steamcar);
      var param = {
        header_id: 7 + "",
        page: this.paginations.pageIndex, // 第几页
        page_size: this.paginations.pageSize, // 每页显示条数
        ...this.obj_list_three,
      };
      dispatcharrivelist(param).then((res) => {
        this.orders_list_three = res.data.list == null ? [] : res.data.list;
        this.orders_list_three.unshift({});
        this.header_data_list_three = this.orders_list_three;
        this.HeaderData_three = res.data.item_list;
        this.Fntransformation_three(this.HeaderData_three);
        this.paginations.total = res.data.total;
      });
    },
    objheader_three(obj) {
      // console.log(obj, "已到达的数据");
      this.orders_list_three = [];
      var data = {
        header_id: 7 + "",
        ...obj,
      };
      this.obj_list_three = obj;
      dispatcharrivelist(data).then((res) => {
        if (res.code === 10000 && res.data.list !== null) {
          this.orders_list_three = res.data.list == null ? [] : res.data.list;
          this.orders_list_three.unshift({});
          this.header_data_list_three = this.orders_list_three;
          this.paginations.total = res.data.total;
          this.paginations.pageSize = 20;
        } else {
          this.header_data_list_three = [{}];
          this.paginations.total = res.data.total;
        }
      });
    },
    handleDelete_second() {},
    handleDelete_three(index, id, type) {
      this.handleJump(id);
    },
    handleDeleteType_three(value) {
      this.checkIds = value.map(String);
    },
    // 隐射函数
    Fntransformation_three(obj) {
      const result = {};
      for (const prop in obj) {
        if (obj.hasOwnProperty(prop)) {
          if (obj[prop].send_name !== "") {
            result[obj[prop].name] = obj[prop].show_name;
          } else {
            result[obj[prop].name] = obj[prop].name;
          }
        }
      }
      this.propMap_three = result;
    },
    // 功能键位
    handleClickOperation(type) {
      if (this.checkIds.length === 0) {
        this.$message({
          message: "请选中后进行操作",
          type: "warning",
        });
        return;
      }
      if (type === 1) {
        this.departTime = Date.now();
        this.showDepartDialog = true;
      } else if (type === 2) {
        this.arrivalTime = Date.now();
        this.showArrivalDialog = true;
      } else if (type === 3) {
        this.$alert("确定要取消发车吗？", "提示", {
          confirmButtonText: "确定",
          callback: async (action) => {
            if (action === "cancel") return;
            const result = await this.getReault("cancelDepart");
            this.alertTable(result, { title: "取消发车" });
            this.getTrunklineList();
          },
        });
      } else if (type === 4) {
        this.$alert("确定要删除运输单吗？", "提示", {
          confirmButtonText: "确定",
          callback: async (action) => {
            if (action === "cancel") return;
            const result = await this.getReault("cancelLoad");
            this.alertTable(result, { title: "删除运输批次" });
            this.getTrunklineList();
          },
        });
      } else if (type === 5) {
        this.$alert("确定要取消到达吗？", "提示", {
          confirmButtonText: "确定",
          callback: async (action) => {
            if (action === "cancel") return;
            const result = await this.getReault("CancellationArrival");
            this.alertTable(result, { title: "取消到达" });
            this.getTrunklineList();
          },
        });
      }
    },
    handleSelectionChange(selects) {
      this.checkIds = selects.map((item) => item.id);
    },
    handleClickDetail_three(val) {
      this.handleClickDetail(val);
    },
    handleClickEdit_three(val) {
      // console.log(val, "fjalksdjflakjdsf");
      this.handleClickEdit(val);
    },
    clickabnormalFn_three(val) {
      this.clickabnormalFn(val);
    },
    handleClickEdit({ id, waybill_id_list = [] }) {
      // console.log("编辑暑假");
      this.mode = "edit";
      this.nowId = id;
      this.ids = waybill_id_list.map(Number);
      this.showDialog = true;
    },
    handleClickDetail({ id, waybill_id_list = [] }) {
      this.mode = "detail";
      this.nowId = id;
      this.ids = waybill_id_list.map(Number);
      this.showDialog = true;
    },
    //异常操作
    clickabnormalFn(valData) {
      const { dispatch_waybills = [], id } = valData;
      const waybill_id_list = dispatch_waybills.map((item) => item.waybill_id);
      this.$msgbox({
        title: "提交异常",
        message: (
          <AbnormalModal
            key={Math.random()}
            step={2}
            waybillIds={waybill_id_list}
            nodeId={id}
            style="width:600px"
          ></AbnormalModal>
        ),
        customClass: "temperature_msg",
        showConfirmButton: false,
        showCancelButton: false,
        closeOnClickModal: false,
        showClose: true,
      });
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.paginations.pageSize = val;
      this.getTrunklineList();
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.paginations.pageIndex = val;
      this.getTrunklineList();
    },
    async handleClickDepart() {
      const result = await this.getReault("depart");
      this.alertTable(result, { title: "批量发车" });
      this.showDepartDialog = false;
      this.getTrunklineList();
    },
    async handleClickArrival() {
      const result = await this.getReault("arrival");
      this.alertTable(result, { title: "批量到达" });
      this.showArrivalDialog = false;
      this.getTrunklineList();
    },
    alertTable(result, { title }) {
      this.$msgbox({
        title,
        message: (
          <el-table border data={result}>
            <el-table-column
              width="200"
              property="batch"
              label="运输批次"
            ></el-table-column>
            <el-table-column
              width="100"
              property="car_no"
              label="车牌号"
            ></el-table-column>
            <el-table-column
              width="200"
              property="success"
              label="处理状态"
            ></el-table-column>
            <el-table-column
              width="300"
              property="reason"
              label="失败原因"
            ></el-table-column>
          </el-table>
        ),
        customClass: "temperature_msg",
        showConfirmButton: true,
        showCancelButton: false,
        confirmButtonText: "关闭",
      });
    },
    handleCloseDialog(isUpdate = true) {
      this.showDialog = false;
      isUpdate && this.getTrunklineList();
    },
    //干线费用修改
    drawertrunkline() {
      this.drawertrunklineFlagShow = true;
    },
    drawertrunklineFlagShowFn(data) {
      this.drawertrunklineFlagShow = data;
    },
    handleWaybillMessage(val) {
      const Fn = ["drawertrunkline"][val];
      this[Fn] && this[Fn]();
      if (val == "2") {
        this.drawertrunkline();
        sendClickTracker("P7-12");
      }
    },
    getReault(type) {
      // console.log(type, "用户将要发车拉");
      let fn, params;
      if (type === "depart") {
        fn = TrunklineDepartFn;
        params = { departure_time: timestamp10(this.departTime) };
      } else if (type === "arrival") {
        fn = TrunklineArrivalFn;
        params = { arrival_time: timestamp10(this.arrivalTime) };
      } else if (type === "cancelDepart") {
        fn = TrunklineDepartCancelFn;
        params = {};
      } else if (type === "cancelLoad") {
        fn = TrunklineLoadCancelFn;
        params = {};
      } else if (type == "CancellationArrival") {
        fn = dispatchcancel;
        params = {};
      }
      return new Promise((resolve) => {
        let resultArr = [];
        this.checkIds &&
          this.checkIds.forEach(async (id) => {
            const checked = this.orders.find((item) => item.id === id);
            const res = await fn({
              id,
              ...params,
            });
            // console.log(res, "res res jfalksdf");
            if (res.code === 10000) {
              resultArr.push({ ...checked, success: "操作成功" });
            } else {
              resultArr.push({
                ...checked,
                success: "操作失败",
                reason: res.message,
              });
            }
            if (resultArr.length === this.checkIds.length) {
              resolve(resultArr);
            }
          });
      });
    },
    // 查询
    handleSearch() {
      this.getTrunklineList();
    },
    // 重置
    handleReset() {
      this.$refs.TableHeaderList.childMethod();
      this.getTrunklineList();
    },
    async handleJump(scope, index) {
      // console.log(scope, "fjalskdjflkj");
      const id = scope.dispatch_waybills;
      // console.log(scope, "");
      let text = this.$router.resolve({
        name: "waybillDetail",
        query: { id, activeName: "1" },
      });
      window.open(text.href, "_blank");
    },
    organizationBoxFn() {
      let data = {
        show_employee: false, // 是否展示员工信息
        not_show_first_branch: 1,
      };
      organizationBox(data).then((res) => {
        if (res.code === 10000) {
          this.organizationBoxData = res.data;
        }
      });
    },
    objSettinUp() {
      this.getTrunklineList();
    },
    handleJumpway(scope, index) {
      this.handleJump_list(scope, index);
    },
    handleJump_list(scope, index) {
      const waybill_id_list = scope.row.waybill_list || [];

      const id = waybill_id_list[index].waybill_id;

      let text = this.$router.resolve({
        name: "waybillDetail",
        query: { id, activeName: "1" },
      });
      window.open(text.href, "_blank");
    },
  },
};
</script>
<style lang="less" scoped>
.allOrderContainer {
  padding: 10px;
  margin-top: 5px;
  margin-left: 5px;
  background-color: #fff;
  .orderHeader {
    background-color: #fff;
    .orderSearch {
      ::v-deep .el-form--inline .el-form-item__content {
        vertical-align: middle;
      }
      ::v-deep .el-collapse {
        border-top: none;
        border-bottom: none;
      }
    }
  }
  .actions {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    background-color: #fff;
    padding: 0px 15px 0px 0px;
    .el-button + .el-dropdown,
    .el-dropdown + .el-button {
      margin-left: 10px;
    }
  }
  .rightArea {
    background-color: #fff;
    width: 100%;
    text-align: end;
    // margin-bottom: 10px;
  }
}
</style>